<template>
	<view class="page">
		<public-module></public-module>
		<view class="account-form-box">

			<u--form labelPosition="top" :model="model" ref="uForm" labelWidth="100%" errorType="message">
				<u-form-item :label="$t('email')" prop="email">
					<u--input v-model="model.email" :placeholder="$t('email_mst')" type="text" />
				</u-form-item>
				<u-form-item :label="$t('verificode')" prop="verifyCode" style="position: relative;">
					<u--input v-model="model.verifyCode" maxlength="4" :placeholder="$t('verificode_input')" type="number" />
					<u-button class="getvcode" slot="right" type="success" size="mini" @click="getCode">{{ codeTips }}</u-button>
				</u-form-item>
				<u-form-item :label="$t('t_pwd')" prop="password">
					<u--input v-model="model.password" :placeholder="$t('desc_strlen')" type="password" />
				</u-form-item>
				<u-form-item :label="$t('t_pwdconfirm')" prop="confirmpassword">
					<u--input v-model="model.confirmpassword" :placeholder="$t('desc_confirmpwd')" type="password" />
				</u-form-item>
				<u-form-item :label="$t('t_invitation')" style="display: none;">
					<u--input v-model="model.parentcode" :placeholder="$t('pls_invit')" type="text" />
					<!--text slot="right" class="u-p-l-20">{{$t('pls_invit')}}</text-->
				</u-form-item>
			</u--form>
			
			<u-code seconds="60" ref="uCode" @change="codeChange"></u-code>

			<u-gap height="20"></u-gap>
			<u-button type="primary" @click="submit">{{$t('submit')}}</u-button>
			<u-gap height="20"></u-gap>
			<view class="u-flex u-row-between">
				<view @tap="$tools.goJump('/pages/user/account/login/login')">{{$t('signin_login')}}</view>
			</view>
		</view>

		<u-gap height="40"></u-gap>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import store from '@/store';
import { api_login,api_emailregister,api_verifycode_send } from '@/config/api.js';
export default {
	data() {
		return {
			title: this.$t('emailRegister'),
			desc: '',
			codeTips: '',
			model: {
				parentcode:'',
				email: '',
				verifyCode: '',
				password: '',
				confirmPassword: ''
			},
			rules: {
				email: [
					{
						required: true,
						message: this.$t('email_mst'),
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.email(value);
						},
						message: this.$t('email_not'),
						trigger: ['change', 'blur']
					}
				],
				verifyCode: [
					{
						required: true,
						message: this.$t('verificode_input'),
						trigger: ['change', 'blur']
					},
					{
						type: 'number',
						message: this.$t('verificode_ckisnum'),
						trigger: ['change', 'blur']
					},
					{
						len: 4,
						message: this.$t('verificode_cklen'),
						trigger: ['change', 'blur']
					}
				],
				password: [
					{
						required: true,
						message: this.$t('pls_pwd'),
						trigger: ['change', 'blur']
					},
					{
						min: 6,
						max: 20,
						message: this.$t('password_lengthnot'),
						trigger: ['change', 'blur']
					},
					// {
					// 	pattern: /^[0-9a-zA-Z]*$/g,
					// 	transform(value) {
					// 		return String(value);
					// 	},
					// 	message: this.$t('newpwd_lengthnot'),
					// 	trigger: ['change', 'blur']
					// }
				],
				confirmpassword: [
					{
						required: true,
						message: this.$t('t_pwdconfirm'),
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return value === this.model.password;
						},
						message: this.$t('twopwdnotmatch'),
						trigger: ['change', 'blur']
					}
				]
			}
		};
	},
	methods: {
		...mapMutations(['setUserInfo']),
		submit() {
			this.$refs.uForm.validate().then(res => {
				this.loadstatus=true
				api_emailregister({
					nickname:'',
					email:this.model.email,
					password:this.model.password,
					confirmpassword:this.model.confirmpassword,
					verifyCode:this.model.verifyCode,
					captcha_id:'',
					captcha_code:'',
					parentcode:this.model.parentcode,
					position:'',
					reg_channel:''
				}).then((res) => {
						console.log(res);
						this.loadstatus=false
						// 储存登录信息
						let userInfo = {
							...res,
							userId:res.member_id,
							token:true,//token用于判断是否登录
						}
						this.setUserInfo(userInfo)
						uni.showToast({
							title: 'Registration successful~',
							icon: 'none'
						});
						this.loadstatus = false;
						setTimeout(()=>{
							this.$tools.goJump('/pages/my/myInfo',{},'','launch')
						},500)
                }).catch((err) =>{
                	this.loadstatus = false;
                	console.log(err,'catch')
                })
			}).catch(errors => {})
		},
		codeChange(text) {
			this.codeTips = text;
		},
		// 获取验证码
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: this.$t('verificode_get'),
					mask: true
				});

				api_verifycode_send({
					scenetype: 2,
					scenemode: 'reg',
					email:this.model.email
				}).then(res => {
					uni.hideLoading();
					uni.showToast({title: this.$t('verificode_sendok'),icon: 'none'});
					this.$refs.uCode.start(); //通知验证码组件内部开始倒计时
				}).catch((err) =>{})
					

			} else {
				this.$u.toast(this.$t('waitminute'));
			}
		}
	},
  onLoad(option) {
    uni.setNavigationBarTitle({ title: this.$t("pagetitle.reg") });
  },
onReady() {
		//onReady 为uni-app支持的生命周期之一
    	this.$refs.uForm.setRules(this.rules)
},

};
</script>

<style lang="scss" scoped>
.account-form-box {
	padding: 0 32rpx;
}

    .getvcode {
        width: 100px;
		height: 32px;
        text-align: center;
        border-radius: 8rpx;
        position: absolute;
        top: 55px;
        transform: translateY(-50%);
        right: 5px;
        z-index: 11;
    }
</style>
